<template>
  <el-main>
    <!--      面包屑        -->
    <el-card class="box-card">
      <el-breadcrumb separator="/" >
        <el-breadcrumb-item :to="{ path: '/' }">homepage</el-breadcrumb-item>
        <el-breadcrumb-item
        ><a href="/">promotion management</a></el-breadcrumb-item
        >
        <el-breadcrumb-item>promotion list</el-breadcrumb-item>
        <el-breadcrumb-item>promotion detail</el-breadcrumb-item>
      </el-breadcrumb>
    </el-card>
    <!--        列表功能      -->
    <el-card class="box-card">
      <el-row class="mb-4">
        <el-button>全选</el-button>
        <el-button type="primary" @click="dialogTableVisible = true"><el-icon><Edit /></el-icon>新增</el-button>
        <el-button type="success"><el-icon><Document /></el-icon>导出</el-button>
        <el-button type="warning"><el-icon><Switch /></el-icon>转交</el-button>
        <el-button type="info"><el-icon><Printer /></el-icon>打印</el-button>
        <el-button type="danger"><el-icon><Delete /></el-icon>删除</el-button>
        <el-badge :value="3" class="item" style="margin-left: 10px;">
          <el-button><el-icon><School /></el-icon>今日到院</el-button>
        </el-badge>
      </el-row>
    </el-card>
    <!--       搜索       -->
    <el-card class="box-card">
      <el-form :label-position="labelPosition">
        <el-row :gutter="15">
          <el-col :span="4">
            <el-form-item label="Name">
              <el-input />
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="Name">
              <el-select v-model="option" placeholder="Select" style="width: 100%">
                <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="Date">
              <el-date-picker
                  v-model="date"
                  type="date"
                  placeholder="选择日期"
              />
            </el-form-item>
          </el-col>
        </el-row>

        <el-divider style="margin: 0" />
        <el-row class="mb-4" style="margin-top: 15px">
          <el-button type="primary"><el-icon><Search /></el-icon>搜索</el-button>
          <el-button>重置</el-button>
        </el-row>
      </el-form>
    </el-card>
    <!--      列表        -->
    <el-card class="box-card">
      <el-scrollbar>
        <el-table :data="tableData" style="width: 100%;">
          <el-table-column fixed prop="booking_date" label="预约日期" width="150" />
          <el-table-column fixed prop="number" label="客户编号" width="150" />
          <el-table-column fixed prop="name" label="姓名" width="120" />
          <el-table-column fixed prop="phone" label="手机号" width="120" />
          <el-table-column prop="source" label="来源渠道" width="120" />
          <el-table-column prop="user" label="跟进人" width="120" />
          <el-table-column prop="status" label="状态" width="80" >
            <el-tag class="ml-2" type="success">进院</el-tag>
          </el-table-column>
          <el-table-column fixed="right" prop="to_date" label="实际到院日期" width="150" />
          <el-table-column fixed="right" prop="is_deal" label="是否成交" width="100" >
<!--            <el-tag class="ml-2" type="success">成交</el-tag>-->
            <el-tag class="ml-2" type="danger">未成交</el-tag>
          </el-table-column>
          <el-table-column fixed="right" prop="earnest" label="定金" width="120" />
          <el-table-column fixed="right" prop="trading_volume" label="成交金额" width="120" />
          <el-table-column fixed="right" label="操作" width="280">
            <template #default>
              <div class="flex justify-space-between mb-4 flex-wrap gap-4">
                <el-button class="ml-2" type="success" @click="dialogFormVisible = true"><el-icon><Edit /></el-icon>编辑</el-button>
                <el-button class="ml-2" type="primary" @click="dialogVisible = true">
                  <el-icon><Warning /></el-icon>处理
                </el-button>
                <el-button class="ml-2" type="danger"><el-icon><Delete /></el-icon>删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </el-scrollbar>
    </el-card>
    <!--              //分页-->
    <el-card>
      <div class="pagination-block">
        <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 30]"
            :small="small"
            :disabled="disabled"
            :background="background"
            layout="total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
        />
      </div>
    </el-card>
    <!-- 更改弹窗状态 start -->
    <el-dialog
        v-model="dialogVisible"
        title="修改状态"
        width="30%"
    >
      <span>是否修改客户到院状态？</span>
      <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">
          确认
        </el-button>
      </span>
      </template>
    </el-dialog>
    <!-- 更改状态弹窗 end -->
  </el-main>
  <!-- 预约到院编辑页面 start -->
  <el-dialog v-model="dialogFormVisible" title="编辑" width="500">
    <el-form :model="form">
      <el-form-item label="是否成交" :label-width="formLabelWidth">
        <el-select v-model="form.is_deal">
          <el-option label="成交" value="shanghai" />
          <el-option label="定金" value="beijing" />
          <el-option label="未成交" value="beijing" />
        </el-select>
      </el-form-item>
      <el-form-item label="定金" :label-width="formLabelWidth">
        <el-input v-model="form.earnest" autocomplete="off" />
      </el-form-item>
      <el-form-item label="成交金额" :label-width="formLabelWidth">
        <el-input v-model="form.trading_volume" autocomplete="off" />
      </el-form-item>
      <el-form-item label="实际到院日期" :label-width="formLabelWidth">
        <el-date-picker
            v-model="form.to_date"
            type="date"
            placeholder="选择日期"
        />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">
          确认
        </el-button>
      </span>
    </template>
  </el-dialog>
  <!-- 预约到院编辑页面 end -->
  <!-- 新增预约 start -->
  <el-dialog v-model="dialogTableVisible" title="新增预约">
    <el-table :data="gridData">
      <el-table-column property="date" label="Date" width="150" />
      <el-table-column property="name" label="Name" width="200" />
      <el-table-column property="address" label="Address" />
    </el-table>
  </el-dialog>
  <!-- 新增预约 end -->
</template>

<script lang="ts" setup>
import { reactive, ref } from 'vue'
import {
  Document,
  Menu as IconMenu,
  Message,
  Setting
} from '@element-plus/icons-vue'
//更改状态
const dialogVisible = ref(false)
//新增预约
const dialogTableVisible = ref(false)
//预约表单
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const form = reactive({
  is_deal: '',
  trading_volume: '3,600.00',  //成交金额
  earnest:'500.00',//定金
  to_date: '',   //到院日期
})
//搜索
const labelPosition = ref('top')
//日期插件
const date = ref('')
//下卡选框值
const option = ref('')
//下拉选框
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  }
]

const visible = ref(false)
//分页
const currentPage = ref(4)
const pageSize = ref(100)

//测试数据
const tableData = [
  {
    booking_date: '2016-05-03 16:16',   //预约日期
    number: 'KPT202303304619',    //客户编号
    name: '张xx', //姓名
    phone: '185****1491', //手机号
    source: '微信',  //客户来源
    user: '张xx',  //跟进人
    status: 'Home',  //状态
    to_date: '2016-05-03 16:16',   //实际到院日期
    is_deal: 'Home',   //是否成交
    trading_volume: '3,600.00',  //成交金额
    earnest:'500.00',//定金
  },
]



</script>

<style scoped>
.box-card{
  margin-bottom: 15px;
}
/*修改表单样式*/
.el-select{
  width: 100%;
}
.el-date-editor > .el-input__wrapper{
  width: 100%;
}
</style>


